<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Range Slider</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Volume</div>
      <div class="list list-strong-ios list-outline-ios simple-list">
        <ul>
          <li>
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">speaker_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">volume_mute</i>
            </div>
            <div style="width: 100%; margin: 0 16px">
              <div class="range-slider range-slider-init">
                <input type="range" min="0" max="100" step="1" value="10" />
              </div>
            </div>
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">speaker_3_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">volume_up</i>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Brightness</div>
      <div class="list list-strong-ios list-outline-ios simple-list">
        <ul>
          <li>
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">sun_min</i>
              <i class="icon material-icons md-only" style="width: 24px">brightness_low</i>
            </div>
            <div style="width: 100%; margin: 0 16px">
              <div class="range-slider range-slider-init color-orange" data-label="true">
                <input type="range" min="0" max="100" step="1" value="50" />
              </div>
            </div>
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">sun_max_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">brightness_high</i>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title display-flex justify-content-space-between">
        Price Filter <span class="price-value">$${priceMin} - $${priceMax}</span>
      </div>
      <div class="list list-strong-ios list-outline-ios simple-list">
        <ul>
          <li class="item-row">
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">money_dollar_circle</i>
              <i class="icon material-icons md-only" style="width: 24px">attach_money</i>
            </div>
            <div style="width: 100%; margin: 0 16px">
              <div class="range-slider range-slider-init color-green" @range:change=${onPriceChange} data-label="true"
                data-dual="true" data-min="0" data-max="500" data-step="1" data-value-left="200" data-value-right="400">
              </div>
            </div>
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">money_dollar_circle_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">monetization_on</i>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">With Scale</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="range-slider range-slider-init" data-min="0" data-max="100" data-label="true" data-step="5"
          data-value="25" data-scale="true" data-scale-steps="5" data-scale-sub-steps="4"></div>
      </div>
      <div class="block-title">Vertical</div>
      <div class="block block-strong-ios block-outline-ios display-flex justify-content-center">
        <div class="range-slider range-slider-init margin-right" data-vertical="true" data-min="0" data-max="100"
          data-label="true" data-step="1" data-value="25" style="height: 160px"></div>
        <div class="range-slider range-slider-init margin-horizontal" data-vertical="true" data-min="0" data-max="100"
          data-label="true" data-step="1" data-value="50" style="height: 160px"></div>
        <div class="range-slider range-slider-init margin-horizontal" data-vertical="true" data-min="0" data-max="100"
          data-label="true" data-step="1" data-value="75" style="height: 160px"></div>
        <div class="range-slider range-slider-init margin-left" data-dual="true" data-vertical="true" data-min="0"
          data-max="100" data-label="true" data-step="1" data-value-left="25" data-value-right="75"
          style="height: 160px"></div>
      </div>
      <div class="block-title">Vertical Reversed</div>
      <div class="block block-strong-ios block-outline-ios display-flex justify-content-center">
        <div class="range-slider range-slider-init color-red margin-right" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value="25"
          style="height: 160px"></div>
        <div class="range-slider range-slider-init color-red margin-horizontal" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value="50"
          style="height: 160px"></div>
        <div class="range-slider range-slider-init color-red margin-horizontal" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value="75"
          style="height: 160px"></div>
        <div class="range-slider range-slider-init color-red margin-left" data-dual="true" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value-left="25"
          data-value-right="75" style="height: 160px"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $el, $update }) => {
    let priceMin = 200;
    let priceMax = 400;

    const onPriceChange = (e) => {
      const range = $f7.range.get(e.target);
      priceMin = range.value[0];
      priceMax = range.value[1];
      $update();
    };

    return $render;
  };
</script>